.workflow-new-design-style{
    height: 100%;
    .workflow-design-btns{
        background: #F8F8F8;
        a{
            display: inline-block;
            padding: 4px 5px;
        }
        img,span{
            display: inline-block;
            vertical-align: middle;
        }
        img{
            margin: 0 5px;
        }
    }
    .workflow-design-container{
        height: calc(~"(100% - 28px)");
        iframe{
            height: 100%;
            width: 100%;
            border: none;
        }
    }
}
.workflow-new-design-editIframe , .workflow-new-design-editIframe iframe{
    height: 100%;
    width: 100%;
}
// 自由流程
// ************************************************
.workflow-design-free-node{
    display: inline-block;
    vertical-align: middle;
    width: 85px;
    font-size: 12px;
    text-align: center;
    padding: 10px;
    position: relative;
    z-index: 1;
    margin: 0 25px 0 0;
    background: #fff;
    .wf-design-free-nodeType{
        .edit-btns-container{
            color: #2285FE;
            .edit-btn-item{
                padding: 0 4px;
                cursor: pointer;
            }
        }
    }
    .wf-design-free-nodeContent{
        width: 50px;
        height: 50px;
        // line-height: 50px;
        border-radius: 100%;
        border: 1px solid #099d6a;
        background: #bef2c3;
        cursor: pointer;
        margin: 0 auto;
        padding: 12px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .free-nodeContent-haveToPass-badge{
            position: absolute;
            right: -5px;
            top: 0;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            color: #fff;
            border-radius: 50%;
            background: #ff6600;
        }
    }
    .wf-design-free-nodeName{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
// 自由流程
.wf-design-free-svg-container{
    height: 100%;
    .wf-design-free-svg{
        height: 100%;
        overflow: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        svg{
            position: relative;
            z-index: 1;
        }
        path{
            // transform: translate(-0.5px,-0.5px);
        }
        .sign-hide-btn-area{
            position: absolute;
            cursor: pointer;
            border-radius: 100%;
            background: rgba(0,0,0,0.001);//ie下 必须设置一个类似属性才行不然当前会元素失效
        }
        .float-sign-btn{
            position: absolute;
            left: 0;
            .ant-btn{
                border: none;
                padding: 0;
                .anticon{
                    font-size: 18px;
                    color: #979797;
                    border: 1px solid #979797;
                    background: #f5f5f5;
                    border-radius: 50%;
                    padding: 2px;
                }
                .icon-coms-Enlarge{
                    border-radius: 100%;
                    font-size: 20px;
                    cursor: pointer;
                    color: #979797;
                    background: #fff !important;
                }
            }
        }
    }
    .wf-design-free-nodeInfo{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        .workflow-design-free-node{
            position: absolute;
            margin: 0;
            z-index: 2;
        }
    }
    .wf-design-free-brachGroups{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        .wf-design-block-groups{
            position: absolute;
            z-index: 1;
            text-align: center;
            .groups-title{
                position: absolute;
                right: -9px;
                top: 15px;
                bottom: 15px;
                writing-mode: vertical-rl;
                background: #fff;
                color: #333333;
                font-size: 14px;
                z-index: 11;
                cursor: pointer;
            }
            .groups-border:hover{
                // border-color: #2285FE;
                cursor: pointer;
            }
            .left-border{
                position: absolute;
                left: 0;
                top: 0;
                width: 5px;
                height: 100%;
                border-left: 1px dashed;
            }
            .top-border{
                position: absolute;
                left: 0;
                top: 0;
                height: 5px;
                width: 100%;
                border-top: 1px dashed;
            }
            .right-border{
                position: absolute;
                right: 0;
                top: 0;
                width: 5px;
                height: 100%;
                border-right: 1px dashed;
            }
            .bottom-border{
                position: absolute;
                left: 0;
                bottom: 0;
                height: 5px;
                width: 100%;
                border-bottom: 1px dashed;
            }
            .groups-border{
                border-color:#CCCCCC;
                z-index: 10;
            }
        }
        .groups-element-sup-addBtn{
            position: absolute;
            width: 16px;
            height: 16px;
            border: 1px solid #979797;
            border-radius: 50%;
            background: #fff;
            z-index: 20;
            cursor: pointer;
            .icon-coms-Enlarge{
                background: #fff;
                border-radius: 100%;
                font-size: 20px;
                cursor: pointer;
                color: #979797;
                line-height: 18px;    
                margin-left: -3px;
                margin-top: -3px;
                float: left;
                display: none;
            }
        }
        .groups-element-sup-addBtn:hover{
            .icon-coms-Enlarge{
                display: block;
            }
        }
    }
    .workflow-design-free-node-v2{
        position: absolute;
        z-index: 2;
        .showname{
            width: 85px;
            height: 18px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #466F4A;
        }
        .node-operators{
            width: 75px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #466F4A;
        }
        .circle{
            width: 92px;
            height: 92px;
            border-radius: 100%;
            cursor: pointer;
            .showname{
                width: 100%;
                margin-top: 25px;
            }
            .node-operators{
                width: 100%;
            }
            .free-node-v2-action-area{
                transform:none;
            }
        }
        .circleModel{
            width: 90px;
            height: 90px;
            padding: 0 14px;
            text-align: center;
            border-radius: 100%;
            background: #FFFFFF;
            border: 2px dashed #979797;
            cursor: default;
            .showname{
                width: 100%;
                margin-top: 25px;
            }
            .node-operators{
                width: 100%;
            }
            .free-node-v2-action-area{
                transform:none;
            }
            .name{
                margin-top: 30px;
                color: #979797;
            }
        }
        .endNode{
            width: 40px;
            height: 40px;
            text-align: center;
            border: 1px solid #979797;
            margin-top: 10px;
            padding: 0 10px;
            .name{
                font-size: 20px;
                font-weight: bolder;
                margin:0;
            }
        }
        .shenpi{
            position: absolute;
            display: inline-block;
            width: 77px;
            height: 77px;
            background: #BFF3C3;
            border: 1px solid #5ABD6B;
            cursor: pointer;
            // margin: 10px;
            transform: rotate(45deg);
            .showname{
                transform: rotate(-45deg) translate(-23px,9px);
                -ms-transform: rotate(-45deg) translate(-23px,9px);
            }
            .node-operators{
                transform: rotate(-45deg) translate(-8px, 20px);
                -ms-transform: rotate(-45deg) translate(-8px, 20px);
            }
        }
        .free-node-v2-action-area{
            position: absolute;
            // left: 0;
            // right: 0;
            // top: 0;
            // bottom: 0;
            left: -20px;
            right: -20px;
            top: -20px;
            bottom: -20px;
            transform: rotate(-45deg);
            z-index: 1;
            .action-item{
                position: absolute;
                font-size: 18px;
                cursor: pointer;
                color: #979797;
                line-height: 18px;
                .icon-coms-Enlarge{
                    background: #fff;
                    border-radius: 100%;
                    font-size: 20px;
                }
            }
            .delete{
                // top: -12px;
                left: 20px;
                top: -5px;
            }
            .operators{
                // top: -12px;
                // left: 50px;
                right: 20px;
                top: -5px;
                transform: none;
            }
            .addSerial{
                // top: 24px;
                // left: 75px;
                right: 0px;
                top: 45px;
                z-index: 20;
            }
            .addParalla{
                // top: 75px;
                // left: 25px;
                left: 47px;
                bottom: 0px;
            }
        }
        .chuli{
            position: absolute;
            width: 108px;
            height: 70px;
            background: #BFF3C3;
            border: 1px solid #5ABD6B;
            cursor: pointer;
            // margin: 10px;
            .showname{
                width: 100%;
                margin-top: 16px;
            }
            .node-operators{
                width: 100%;
            }
            .free-node-v2-action-area{
                left: 0;
                transform: none;
                .addSerial{
                    right: 8px;
                }
                .addParalla{
                    bottom: 8px;
                }
            }
        }
        .mustPass-icon{
            position: absolute;
            background: #fff;
            color: red;
            border-radius: 100%;
            font-size: 16px;
        }
        .mobile-operations{
            position: absolute;
            left: 0;
            top: 0;
            background: #717171;
            color: #fff;
            white-space: nowrap;
            padding: 4px 6px;
            border-radius: 2px;
            .change-operators{
                margin: 0 4px;
                border-left: 1px solid #fff;
                border-right: 1px solid #fff;
                padding: 0 4px;
            }
        }
    }
}
// ***************free design container *****************
.wf-design-free-outter-container{
    height: calc(100% - 60px);
    position: relative;
    .wf-design-free-right-detail{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 400px;
        border-left: 1px solid #e4e4e4;
        z-index: 1;
        .detail-header{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            background: #f5f5f5;
            border-bottom: 1px solid #CCCCCC;
        }
        .detail-content{
            height: ~'calc(100% - 50px)';
            overflow: auto;
            .freeNode-branch-set{
                height: 100%;
                .wea-form-item{
                    border-bottom: 1px solid #eee;
                    padding: 5px 20px;
                }
                .branch-set-wrapper{
                    .wea-field-readonly  {
                        display: inline-block;
                        vertical-align: middle;
                        margin-top:0;
                        width: 28%;
                        max-width: 28%;
                        .child-item{
                            margin-right: 0;
                        }
                    }
                    .wea-select  {
                        width: 40%;
                        margin-right: 8px;
                    }
                    .branch-set-by-ratio{
                        width: 50%;
                        display: inline-block;
                        vertical-align: middle;
                        .wea-input-normal  {
                            width: 30% ;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .ratio-tag , .wea-helpful-tip{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .ratio-tag{
                            margin: 0 8px;
                        }
                        .wea-field-readonly  {
                            .wea-helpful-tip{
                                right: 146px !important;
                                top: 5px !important;
                            }
                        }
                    }
                }
                .branch-set-pointBranch{
                    padding: 10px 20px;
                    height: calc(100% - 50px);
                    .wea-form-item{
                        padding: 6px 0 6px 0;
                    }
                    .point-branch-tip{
                        color: #bbb;
                    }
                    .point-branch-panel{
                        height: calc(100% - 20px);
                        overflow: auto;
                        .point-branch-item{
                            .branch-item-icon{
                                width: 30px;
                                height: 1px;
                                margin-right: 10px;
                                display: inline-block;
                                vertical-align: middle;
                                background: #999;
                                position: relative;
                                span{
                                    width: 8px;
                                    height: 8px;
                                    border-radius: 100%;
                                    border: 1px solid #999;
                                    position: absolute;
                                    left: 11px;
                                    top: -3px;
                                    background: #fff;
                                }
                            }
                            .branch-item-name{
                                width:calc(100% - 65px);
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                display: inline-block;
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }
            .wea-search-group{
                padding: 0;
                .wea-form-cell{
                    padding: 0 15px 0 20px;
                    // .tip-bottom{
                    //     bottom:-56px;
                    // }
                    .ant-col-9{
                        .wea-select {
                            .ant-checkbox-group{
                                padding: 0 0 2px 0;
                                .ant-checkbox{
                                    padding-top: 3px;
                                }
                                span{
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
                .overtime-flowto-next{//
                    .tip-span{
                        display: inline-block;
                        vertical-align: middle;
                        margin: 5px;
                        font-size: 12px;
                        color: #333;
                    }
                }
                .overtime-remind{
                    .wea-select  {
                        display: inline-block;
                        vertical-align: middle;
                        width: 25%;
                        margin: 0 12px;
                    }
                    .wea-field-readonly{
                        padding-bottom: 2px;
                        width: 12%;
                        margin: 0;
                        text-align: center;
                        .child-item{
                            margin: 0;
                        }
                    }
                    .tip-span{
                        display: inline-block;
                        vertical-align: middle;
                        margin: 5px;
                        font-size: 12px;
                        color: #333;
                    }
                }
                .wea-form-item-wrapper{
                    .ant-row-flex-middle{
                        .wea-field-readonly{
                            padding-top: 5px;
                        }
                    }
                }
            }
            .cus-readonly-searchgroup{
                .wea-form-item{
                    .ant-col-16{
                        border-bottom: 1px solid #EAEAEA;
                    }
                }
            }
            .wea-field-readonly{
                margin-top:5px;
            }
            .blank-page{
                text-align: center;
                padding-top: 40%;  
                color: #979797;
                .icon-coms-blank{
                    font-size: 80px;
                }
                p{
                    margin-top: 8px;
                    font-size: 13px;
                }
            }
        }
        .freenode-detail-nextNodeEditPurview{
            .ant-radio-group{
                label{
                    display: block;
                    margin: 5px 0;
                }
            }
        }
        .freenode-detail-approvalSettings{
            .ant-checkbox-group{
                label{
                    display: block;
                    margin: 5px 0;
                }
            }

        }
        .freeNode-right-loopRemind{
            display: inline-block;
            width: 38%;
            .wea-checkbox{
                margin-right: 8px;
            }
        }
        .freeNode-right-remindInterval{
            display: inline-block;
            width: 50%;
            .wea-select{
                width: 50%;
                margin-right: 8px;
            }
        }
        .freeNode-right-overflowtimehour{
            margin-left: 119px;
            .hour-min-label{
                // right: 145px;
            }
        }
        .freeNode-right-overflowtimehour,.freeNode-right-overflowtimeminute{
            display: inline-block;
            // width: 50%;
            width: 30%;
            .wea-input-number  {
                display: inline-block;
                width: 64%;
                vertical-align: middle;
                margin-right: 12px;
            }
            .wea-field-readonly  {
                display: inline-block;
                margin: 3px 2px 0 0px;
            }
            .ant-col-16{
                width: 90%;
                margin-left: 0;
                .wea-input-number{
                    margin-right: 0;
                }
                .error-tip{
                    bottom: -56px;//原来是 32
                }
                .wea-form-item-wrapper{
                    width: 90%;
                    text-align: left;
                }
            }
            .hour-min-label{
                position: absolute;
                // top: 12px;
                right: -25px;
                top: 4px;
            }
        }
        .freeNode-right-readOnly{
            .ant-col-16{
                width: 45%;
            }
        }
        .freeNode-right-overflowtimeminute{
            margin-left: 2%;
            .wea-input-number{
                width: 62%;
            }
            .hour-min-label{
                // right: 30px;
            }
        }
        .freeNode-right-overflowtimedate{
            display: inline-block;
            width: 55%;
            margin-right: 8%;
            vertical-align: middle;
        }
        .freeNode-right-overflowtimetime{
            display: inline-block;
            width: 37%;
            vertical-align: middle;
            margin-top: 2px;
        }
    }
    .wf-design-free-top-buttons{
        position: absolute;
        left: 0;
        top: 0;
        width: ~'calc(100% - 400px)';
        padding: 20px;
        background: #f5f5f5;
        z-index: 10;
        .action-buttons-normal{
            display: inline-block;
            vertical-align: middle;
            // width: 65%;
            color: #333333;
            .ant-btn{
                margin-right: 8px;
                .btns-icon{
                    margin: 0 5px 0 -8px;
                }
            }
        }
        .action-buttons-nodes{
            display: inline-block;
            vertical-align: middle;
            float: right;
            .ant-btn{
                color: #333333;
                margin-right: 8px;
                background: none;
                border: none;
                .btns-icon{
                    margin: 0 5px 0 0px;
                    font-size: 16px;
                    color: #2db7f5;
                }
                span{
                    display: inline-block;
                    vertical-align: middle;
                }
                i{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 16px;
                    color: #2db7f5;
                }
            }
        }
    }
    // 只读时 操作信息弹出框
    .wf-pop-operators-panel{
        position : absolute;
        z-index : 12;
        width:240px;
        .header{
            height: 30px;
            line-height: 30px;
            background: #5f5f5f;
            color: #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding-left: 8px;
            font-size: 12px;
        }
        .content{
            box-shadow: 0 2px 5px #999;
            background: #fff;
            padding: 6px 8px;
            overflow: auto;
            font-size: 12px;
            color: #898989;
            .operator-type{
                padding: 8px 0;
                font-size: 12px;
                color: #898989;
                .type-list{
                    word-break: break-all;
                    .hrm-item{
                        cursor: pointer;
                        margin: 0 2px;
                    }
                }
            }
        }
    }
}
.free-flowset-bottom-tips{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    .tips{
        height: 30px;
        line-height: 55px;
        span{
            font-size: 12px;
            margin: 0 10px;
            color:#333333;
            vertical-align: middle;
        }
        .icon-coms-Enlarge,.icon-coms-switch,.icon-coms-delete{
            font-size: 18px;
        }
    }
}
.wf-free-deign-mobile{
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 12;
    .addIcon{
        font-size: 20px;
        display: inline-block;
        width: 43px;
        height: 43px;
        border-radius: 100%;
        background: #717171;
        margin: 0 5px;
    }
}
// ********add*****
.workflow-design-free-addDatas-typeModal-content{
    padding: 30px;
    height: 100%;
    
    .addDatas-typeModal-content-selectArea{
        .wea-select  {
            width: 100%;
            margin-bottom: 10px;
            .ant-radio-group{
                width: 100%;
                margin-left: 30px;
                .ant-radio-wrapper{
                    margin-right: 160px;
                }
                .ant-radio-wrapper:nth-child(3){
                    margin-right: 0;
                }
            }
        }
    }
    .addDatas-typeModal-content-tipImgs{
        text-align: center;
        .tipImgs-item-img{
            width: 33%;
            display: inline-block;
            vertical-align: middle;  
        }
    }
    .addDatas-typeModal-content-tipWords{
        text-align: center;
        .tipImgs-item-words{
            width: 33%;
            display: inline-block;
            vertical-align: middle;   
            margin-top: 20px;
            color: #999999;
        }
    }
    .addDatas-typeModal-content-branchSet{
        padding: 30px 0 0 27px;
        .branchSet-label,.branchSet-select,.branchSet-input{
            display: inline-block;
            vertical-align: middle;
        }
        .branchSet-select{
            margin: 0 15px;
        }
        .branchSet-input{
            line-height: 30px;
            .wea-input-normal  {
                margin-right: 10px;
            }
            .wea-helpful-tip{
                margin-left: 10px;
            }
        }
    }
    .haveTo-passed-branch{
        padding: 10px 27px;
        .haveTo-passed-title{
            color: #999999;
        }
        .haveTo-passed-branchs-container{
            .needed-branch-item{
                padding: 5px 0;
                border-bottom: 1px solid #f2f2f2;
                div{
                    display: inline-block;
                    vertical-align: middle;
                }
                .needed-branch-item-nodeinfo{
                    width: 50%;
                    img{
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        vertical-align: middle;
                    }
                    span{
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
                .needed-branch-item-nodetype{
                    width: 20%;
                }
                .needed-branch-item-haveToPassComs{
                    width: 20%;
                    .wea-select  {
                        .ant-checkbox-wrapper{
                            margin: 0 0 1px;
                        }
                    }
                }
            }
        }
    }
}
// 审批节点退回设置
.wfFree-flowSet-returnBack-setting{
    height: 100%;
    padding: 20px;
    .wea-form-item{
        padding: 5px 0;
        .wea-switch {
            margin-right: 18px;
        }
    }
}
// 模板设置
.wf-free-flowset-importModal{
    height: 100%;
}